import React, { useState } from 'react'
import { Button, Input, Form, Image, Toast } from 'antd-mobile'
import './login.css'
import { useNavigate } from 'react-router-dom'
import { userLogin } from '../api/login'
function Login() {
    let navigate = useNavigate()
    function gotoRegister() {
        navigate('/register')
    }

    const [form, setForm] = useState({
        email: "",
        password: ""
    })

    function submitForm() {
        userLogin({ ...form }).then((res) => {
            console.log(res, "res登录")
            localStorage.setItem("access", res.data.data.access_token)
            localStorage.setItem("refresh", res.data.data.refresh_token)
            if (res.data.code == 200) {
                Toast.show({
                    content: '登录成功',
                    icon: 'success',
                })
                navigate('/layout')

            }
        }).catch((err) => {
            console.log("登陆失败", err)
        })
    }

    return (
        <div>
            <div className="IMG">
                <Image src={require("../imgs/meigui.jpg")} />
            </div>
            <div className="inp" >
                <Form layout='horizontal'>
                    <Form.Item label='邮箱地址' name='username'>
                        <Input placeholder='请输入用户名' clearable onChange={(e) => { setForm({ ...form, email: e }) }} />
                    </Form.Item>
                    <Form.Item label='用户密码' name='password'>
                        <Input placeholder='请输入密码' clearable type='password' onChange={(e) => { setForm({ ...form, password: e }) }} />
                    </Form.Item>
                </Form>
            </div>
            <div className="btn">
                <Button block color='primary' size='large' onClick={submitForm} >
                    确认登录
                </Button>
                <Button block color='primary' size='large' onClick={gotoRegister} >
                    前往注册
                </Button>
            </div>
        </div>
    )
}
export default Login